// pages/control/changeshape/changeshape.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    width : 100,
    animationWidthData: {},
    trigger:0
  },

  widthlonger: function (event){
    var that = this;
    var num = 0;
    var Interval;
    Interval = setInterval(function () {
      that.setData({
        'width': that.data.width + num
      });

      if (that.data.width > 280) {
        clearInterval(Interval);
        that.widthshort();
      }
      num = num + 1;
    }, 30)
  },
  widthshort: function (event){
    var that = this
    var num = 0;
    var Interval;
    Interval = setInterval(function () {
      that.setData({
        'width': that.data.width + num
      });
      if (that.data.width < 100) {
        clearInterval(Interval);
      }
      num = num - 1;
    }, 30)
  },
  animateWidthtigger: function (event){
    var that = this;
    var width = 0;
    if (that.data.trigger == 1) { width = 100; that.data.trigger = 0}
    else { width = 300; that.data.trigger = 1}
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    })
    that.animation = animation

    animation.width(width).step();

    that.setData({
      animationWidthData: animation.export()
    })
    // setTimeout(function () {
    //   animation.translate(30).step();
    //   this.setData({
    //     animationWidthData: animation.export()
    //   })
    // }.bind(this), 1000)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})